<template>
  <div ref="chart"  :style="chartStyle">
  </div>
</template>

<script>
import echarts from 'echarts';

require('echarts-wordcloud');

export default {
  name: 'customcar',
  props: {
    config: {
      required: true,
    },
    chartStyle: {
      require: false,
      type: Object,
      default: () => ({
        height: '100%',
        position: 'absolute',
        width: '100%',
        top: '0px',
        bottom: '0px',
        left: '0px',
      }),
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() {

  },
  mounted() {
    this.renderChart();
  },
  methods: {
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    renderChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart, this.config.theme);
      }
      const option = this.makeOptions(this.config, this.chartData);
      this.chart.clear();
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.resize();
      }, 100);
    },
    makeOptions() {
      // 说明
      // 项目需要echarts-wordcloud.min.js
      /*      itemStyle: {
                    normal: {
                        opacity: .2 //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
                    }
                }, */
      // 1、自己项目中上面的属性设置0全透明。
      // 2、然后在页面上写一个div样式背景，加载一个美化过的云图片。
      // 3、重合放在这个图表下面。-----绝对定位浮动等等方式
      // 4、最后的效果就是进来时头像效果。

      // 必须是全黑背景，echarts-wordcloud按背景渲染必须是黑色背景图
      const symbolUrl = '';
      const colorList = [
        '#3a96f5',
        '#5faaf7',
        '#78bafe',
        '#1563f2',
        '#add2f8',
        '#e24bf4',
        '#1acaff',
        '#ffde00',
        '#89fda5',
      ];
      const presents = [
        '想你',
        '晴天',
        '电话',
        '手机',
        '下雨',
        '暴雨',
        '多云',
        '雨衣',
        '屋檐',
        '大风',
        '台风',
        '下雪',
        '打雷',
        '小雨',
        '中雨',
        '大雨',
        '雷阵雨',
        '下雪',
        '小雪',
        '中雪',
        '大雪',
        '暴雪',
        '东风',
        '南风',
        '西北风',
        '北风',
        '闪电',
        '变形金刚',
        '棒棒糖',
        '忘了吧',
      ];

      const data = [];
      for (let i = 0; i < presents.length; i += 1) {
        data.push({
          name: presents[i],
          value: (presents.length - i) * 20,
        });
      }
      for (let i = 10; i < presents.length; i += 1) {
        const cnt = Math.floor(Math.random() * 10);
        for (let j = 0; j < cnt; j += 1) {
          data.push({
            name: presents[i],
            value: Math.random() * 10,
          });
        }
      }
      const maskImage = new Image();
      maskImage.src = symbolUrl;
      return {
        // backgroundColor: '#0A2E5D',
        tooltip: {
          show: true,
        },
        grid: {
          left: 0,
          bottom: 0,
          top: 0,
          right: 0,
        },
        xAxis: {
          type: 'category',
          show: false,
        },
        yAxis: {
          max: 100,
          show: false,
        },
        series: [{
          zlevel: -1,
          type: 'pictorialBar',
          name: 'pictorial',
          silent: true,
          symbol: `image://${symbolUrl}`, // 按背景渲染云词
          symbolSize: ['75.2%', '65.2%'],
          symbolPosition: 'center',
          barWidth: '100%',
          barMaxWidth: '100%',
          itemStyle: {
            normal: {
              opacity: 0.2, // 自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
            },
          },
          data: [{
            value: 100,
          }],
        },
        {
          type: 'wordCloud',
          sizeRange: [10, 52],
          rotationRange: [0, 0],
          maskImage,
          textPadding: 0,
          gridSize: 5, // 用于标记画布可用性的网格大小（以像素为单位）//字距越大，字距越大。
          width: '75%',
          height: '65%',
          left: 'center',
          top: 'center',
          drawOutOfBound: false,
          textStyle: {
            normal: {
              fontFamily: 'sans-serif',
              color() {
                const index = Math.floor(Math.random() * colorList.length);
                return colorList[index];
              },
            },
          },
          data,
        },
        ],
      };
    },
  },
  watch: {
    config: {
      deep: true,
      handler() {
        if (this.config.needResize) {
          this.config.needResize = false;
          this.handleResize();
        }
      },
    },
  },
};
</script>

<style scoped lang="stylus">

</style>
